<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.w3.org/1999/xhtml"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorator="inc/layout"
>
<head>
    <meta charset="UTF-8"/>
    <title>我的笔记</title>


    <script>
        function editNoteBookText(id, name) {
            layer.open({
                type: 2,
                title: name,
                shade: 0.8,
                maxmin: true,
                area: ['880px', '620px'],
                content: ctxPath + 'noteBook/myEditText?id=' + id, //iframe的url
            })
        }

        function editNoteBookNotStatus(id, name, status) {
            layer.confirm('确定要不发表该笔记吗？', {
                btn: ['确定', '取消']
            }, function () {
                $.post(ctxPath + "noteBook/myEditNameAndStatus", {
                    id: id,
                    name: name,
                    status: 0,
                }, function (data) {
                    layer.alert(data, function () {
                        location.reload();
                    });
                })
            });
        }

        function editNoteBookStatus(id, name, status) {
            layer.confirm('确定要发表该笔记吗？', {
                btn: ['确定', '取消']
            }, function () {
                $.post(ctxPath + "noteBook/myEditNameAndStatus", {
                    id: id,
                    name: name,
                    status: 1,
                }, function (data) {
                    layer.alert(data, function () {
                        location.reload();
                    });
                })
            });
        }

        function editNoteBook(id, name, status) {
            layer.prompt({
                    title: '请输入笔记新名称', formType: 0, shadeClose: true
                },
                function (name1, i) {
                    layer.close(i);
                    $.post(ctxPath + "noteBook/myEditNameAndStatus", {
                        id: id,
                        name: name1,
                        status: status,
                    }, function (data) {
                        layer.alert(data, function () {
                            location.reload();
                        });
                    });
                }
            );
        }

        function editNoteBookImg(id) {
            layer.open({
                type: 2,
                title: '请上传150X150的正方形图片',
                shadeClose: true,
                shade: 0.8,
                area: ['380px', '580px'],
                content: ctxPath + 'noteBook/editImg?id=' + id, //iframe的url
                end: function () {
                    location.reload();
                }
            })

        }


        function removeNoteBook(id) {
            layer.confirm('确定要删除该课程吗？', {
                btn: ['确定', '取消']
            }, function () {
                $.post(ctxPath + "noteBook/myDelete", {id: id}, function (data) {
                    layer.alert(data, function () {
                        location.reload();
                    });
                })
            });
        }

        function addNoteBook() {
            layer.prompt({
                title: '请输入笔记名称', formType: 0, shadeClose: true, end: function () {
                    location.reload();
                }
            }, function (name, index) {
                $.post(ctxPath + "noteBook/add", {
                    name: name,
                    text: "<p>未添加</p>"
                }, function (data) {

                    layer.alert(data, function () {
                        location.reload();
                    });
                });
            });
        }

        function changeNoteBook(id) {
            layer.confirm('确定要转换为课程吗？', {
                btn: ['确定', '取消']
            }, function () {
                $.post(ctxPath + "noteBook/change", {id: id}, function (data) {
                    layer.alert(data, function () {
                        location.reload();
                    });
                })
            });
        }


    </script>
    <script th:src="@{/static/util/js/wangEditor.js}"></script>
</head>

<body>

<div class="container" layout:fragment="content">
    <div class="row">
        <div class="col-sm-2">
            <div class="btn btn-primary pull-right" onclick="addNoteBook()">添加</div>
        </div>
        <div class="col-sm-10" style="height: 80px">
            <form class="form-inline text-right" action="" method="get">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">笔记名</div>
                        <input type="text" class="form-control" name="name" th:value="${name}" placeholder="hibernate"/>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">搜索</button>
            </form>
        </div>
    </div>

    <div class="row">


        <div class="col-sm-12">
            <div class="col-sm-2">
                <div class=" panel panel-default">
                    <div class="panel-heading "><i class="fa fa-book"></i>发布笔记</div>
                    <div th:each="n:${noteBookPage.content}" th:if="${n.status==1}" style="margin: 10px 5px">
                        <a th:href="@{'/showNoteBook/'+${n.id}}">
                            <img th:src="${n.img}" class="img-thumbnail" width="30%"/>
                            <div th:text="${n.name}" style="float: right;width: 68%"></div>
                        </a>
                    </div>


                </div>
            </div>


            <div class="col-sm-10">
                <div class="col-sm-6" th:each="c:${noteBookPage.content}">
                    <div class="thumbnail" style="height: 160px;padding-top: 10px">
                        <div class="col-sm-4">
                            <img th:src="${c.img}" width="100%"
                                 th:onclick="'editNoteBookText(\''+${c.id}+'\',\''+${c.name}+'\')'"
                                 data-toggle="tooltip"
                                 title="笔记内容"/>
                        </div>
                        <div class="col-sm-8">
                            <div class=" name h3" th:text="${c.name}"></div>
                            <span>

                            <shiro:hasPermission name="我的笔记删除">
                                <i class="fa fa-remove fa-lg" style="margin-left: 20px" data-toggle="tooltip"
                                   title="删除笔记"
                                   th:onclick="'removeNoteBook(\''+${c.id}+'\')'"></i>
                            </shiro:hasPermission>
                            <shiro:hasPermission name="笔记转课程">
                                <i class="fa fa-exchange fa-lg" data-toggle="tooltip"
                                   title="笔记转课程"
                                   th:onclick="'changeNoteBook(\''+${c.id}+'\')'"></i>
                            </shiro:hasPermission>
                            <shiro:hasPermission name="我的笔记修改">
                                <i class="fa fa-pencil fa-lg" data-toggle="tooltip"
                                   title="笔记修改"
                                   th:onclick="'editNoteBook(\''+${c.id}+'\',\''+${c.name}+'\',\''+${c.status}+'\')'"></i>
                            </shiro:hasPermission>
                            <shiro:hasPermission name="笔记换图">
                                <i class="fa fa-file-image-o fa-lg" data-toggle="tooltip"
                                   title="笔记换图"
                                   th:onclick="'editNoteBookImg(\''+${c.id}+'\')'"></i>
                            </shiro:hasPermission>
                            </span>
                        </div>

                        <div class="col-sm-12 ">
                            <shiro:hasPermission name="笔记上下架">

                            <span th:if="${c.status==1}"
                                  th:onclick="'editNoteBookNotStatus(\''+${c.id}+'\',\''+${c.name}+'\',\''+${c.status}+'\')'">
                                <i class="fa fa-toggle-on fa-2x" data-toggle="tooltip"
                                   title="笔记下架"></i>
                            </span>
                                <span th:if="${c.status!=1}"
                                      th:onclick="'editNoteBookStatus(\''+${c.id}+'\',\''+${c.name}+'\',\''+${c.status}+'\')'">
                                 <i class="fa fa-toggle-off fa-2x" data-toggle="tooltip"
                                    title="笔记转上架"
                                 ></i>
                            </span>
                            </shiro:hasPermission>

                        </div>

                    </div>
                </div>
                <div class="row" th:if="${noteBookPage.totalElements}">
                    <div class="col-sm-10">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li class="am-pagination-first ">
                                    <a th:href="@{/noteBook/my(page=1,name=${name})}" class="">第一页</a>
                                </li>
                                <li th:if="${noteBookPage.number > 0}" class="am-pagination-prev ">
                                    <a th:href="@{/noteBook/my(page=${noteBookPage.number},name=${name})}"
                                       class="">上一页</a>
                                </li>
                                <li th:each="i : ${#numbers.sequence(1, noteBookPage.totalPages)}"
                                    th:classappend="${(noteBookPage.number + 1) eq i} ? 'active' : ''">
                                    <a th:href="@{/noteBook/my(page=${i},name=${name})}"
                                       th:text="${i}" class="">1</a>
                                </li>
                                <li th:unless="${noteBookPage.number + 1 == noteBookPage.totalPages}"
                                    class="am-pagination-next ">
                                    <a th:href="@{/noteBook/my(page=${noteBookPage.number} + 2,name=${name})}" class="">下一页</a>
                                </li>
                                <li class="am-pagination-last ">
                                    <a th:href="@{/noteBook/my(page=${noteBookPage.totalPages},name=${name})}" class="">最末页</a>
                                </li>
                                <li class="am-pagination-last ">
                                    <a th:text="'共 '+${noteBookPage.totalElements}+' 条记录'"></a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>

</body>
</html>